<style lang="less">
@import "@/assets/style/variables.less";

.article-list {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    padding: @padd;
    position: relative;

    .article-list-wrap {
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .article-list-footer {
        position: absolute;
        bottom: 20px;
        left: 20px;
        // margin-top: 15px;
    }

    .block {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
    }
}

.my-input {
    width: 100% !important;
    height: 28px;
    line-height: 28px;
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    border-radius: 4px;
}

.el-dialog__body {
    padding: 10px 20px;
}

.el-dialog__header {
    text-align: center;
}
</style>
<template>
    <div class="article-list">
        <h3 class="article-list-title">文章列表</h3>
        <div class="article-list-wrap">
            <el-table border :data="tableData" style="width: 100%">
                <el-table-column align="center" label="序号" width="80">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="ID" prop="id" width="80"></el-table-column>
                <el-table-column align="center" label="作者" prop="author" width="80"></el-table-column>
                <el-table-column align="center" label="标题" prop="title"></el-table-column>

                <el-table-column align="center" label="日期" prop="createAt"></el-table-column>
                <el-table-column align="center" label="导航分类">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.row.cate }}</span> #
                            <span>{{ scope.row.cate_name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="标签">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.row.tag }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="right" width="180">
                    <template slot="header">
                        <input class="my-input" v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">查看详情</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog title="文章详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
                <div v-html="html ? html : ''"></div>
            </el-dialog>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="currentChangeFn" :current-page="currentPage"
                :page-sizes="[4, 5, 6, 7]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import { Message, MessageBox } from "element-ui";
import { itemsArticle, deleteArticle, searchArticle } from "../../api/index"


export default {
    data() {
        return {
            tableData: [
                // {
                //     id: 1,
                //     title: "标题1",
                //     author: "作者1",
                //     cate: "菜单1",
                //     cate_name: "二级菜单",
                //     tag: "标签1,标签2,标签3",
                //     craeteAt: "2025-10-14 14:38:20",
                //     content: "文章",
                // },
            ],
            search: '',
            page_num: 1,// 第几页
            currentPage: 0,
            page_size: 5,//多少
            total: 0,
            timer: null,
            dialogVisible: false,
            html: ''
        }
    },
    // 组件销毁前清理定时器
    beforeDestroy() {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        // 搜索文章
        async searchArticleFn(keyword) {
            await searchArticle({ keyword })
                .then(
                    res => {
                        // console.log(res)
                        if (res.code == 200) {
                            Message({
                                showClose: true,
                                message: res.msg,
                                type: 'success',
                                offset: 100
                            })
                            this.tableData = res.result.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                return item
                            });
                            this.total = res.result.length;
                        } else {
                            Message({
                                showClose: true,
                                message: res.msg,
                                type: 'error',
                                offset: 100
                            })
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '暂无该文章',
                            type: 'error',
                            offset: 100
                        })
                        console.log(err)
                    }
                )
        },
        // 编辑
        handleEdit(row) {
            // console.log(row);
            this.dialogVisible = true;
            this.html = row.content;
        },
        // 删除
        handleDelete(row) {
            // console.log(row);
            MessageBox.confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteArticleFn(row.id);
            }).catch(() => {
                Message({
                    type: 'info',
                    message: '已取消删除',
                    showClose: true,
                    offset: 100
                });
            });
        },
        // 分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.page_size = val
            this.page_num = 1;
            this.itemsArticleFn()
        },
        // 当前页
        currentChangeFn(index) {
            // console.log("index:", index);
            this.page_num = index;
            this.currentPage = index
            this.itemsArticleFn();
        },
        // 获取文章列表
        async itemsArticleFn() {
            let page_num = this.page_num
            let page_size = this.page_size
            await itemsArticle({ page_num, page_size })
                .then(
                    resData => {
                        // console.log(resData)
                        if (resData.code == 200) {
                            this.tableData = resData.data.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                return item
                            })
                            this.total = resData.total;
                        }
                    }
                )
        },
        // 删除文章
        async deleteArticleFn(id) {
            let token = localStorage.getItem("AUTO_TOKEN");
            if (token) {
                await deleteArticle({ token, id })
                    .then(
                        resData => {
                            // 删除成功
                            // console.log(resData)
                            if (resData.code == 200) {
                                Message({
                                    type: "success",
                                    message: resData.msg,
                                    showClose: true,
                                    offset: 100
                                })
                                this.itemsArticleFn();
                            }
                            else {
                                Message({
                                    type: "error",
                                    message: resData.msg,
                                    showClose: true,
                                    offset: 100
                                })
                            }
                        }, err => {
                            Message({
                                type: "error",
                                message: '删除失败',
                                showClose: true,
                                offset: 100
                            })
                            console.log(err)
                        }
                    )
            }
            else {
                Message({ type: "error", message: "您还没有登录" })
            }
        },
    },
    created() {
        //  初始化
        this.itemsArticleFn();
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        },
        // 观察输入框的变化
        search: function (newKeyword) {
            // console.log(newKeyword);
            let keyword = newKeyword.trim();

            // 清除之前的定时器
            if (this.timer) {
                clearTimeout(this.timer);
            }
            if (keyword === '') {
                // console.log('输入框为空');
                this.itemsArticleFn()
            } else {
                // 输入框不为空时，执行搜索
                this.timer = setTimeout(() => {
                    this.searchArticleFn(keyword);
                    this.timer = null;
                }, 600);
            }


        }
    }
}

</script>